<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="提交信息" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="writetel">
			<view class="writetel-content">
				<view class="writetel-content-tel">
					<text class="writetel-content-tel-txt">手机号</text>
					<input v-model="tel" class="writetel-content-tel-tel" type="number" placeholder="请输入手机号" />
					<view @click="onClickSendCode()" :class="{ 'writetel-content-tel-code-active': countdown !== 60 }" class="writetel-content-tel-code">{{ getMessageText }}</view>
				</view>
				<view class="writetel-content-tel writetel-content-code">
					<text class="writetel-content-tel-txt">验证码</text>
					<view class="writetel-content-tel-codecontent">
						<input maxlength="4" placeholder="请输入验证码" class="writetel-content-tel-codecontent-txt" type="number" v-model="code" />
						<image v-if="code" class="writetel-content-tel-codecontent-close"></image>
					</view>
				</view>
				<view class="writetel-content-desc">
					<image class="writetel-content-desc-img"></image>
				</view>
			</view>
			<button :class="{ 'writetel-submitbtn-active': tel && code }" class="writetel-submitbtn">提交</button>
		</view>		
	</view>
</template>

<script>
import { myMixin } from '@/utils/mixin.js'
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
export default {
	mixins: [myMixin],
	components: {
		uniNavBar
	},
	data() {
		return {
			tel: '',
			code: '',
			timer: null,
			countdown: 60,
			getMessageText: '发送验证码'
		}
	},
	// 页面卸载的时候，一定要清除定时器
	onUnload() {
		if (this.timer) {
			clearTimeout(this.timer)
		}
	},
	methods: {
		back() {
			uni.navigateBack({})
		},
		// 发送验证码的操作
		onClickSendCode() {
			if (!this.tel) {
				uni.showToast({
					title: '请填写手机号码',
					icon: 'none'
				})
				return false
			}
			if (!(/^1[34578]\d{9}$/.test(this.tel))) {
				uni.showToast({
					title: '手机号码格式不对',
					icon: 'none'
				})
			  return false
			}
			if (this.timer) {
				return false
			}
			this.beginSetTime()
		},
		// 倒计时操作
		beginSetTime() {
			if (this.countdown === 0) {
			  this.getMessageText = '发送验证码'
			  this.countdown = 60
			  this.timer = null
			  return
			} else {
			  this.getMessageText = `${this.countdown}s后重发`
			  this.countdown--
			}
			this.timer = setTimeout(() => {
			  this.beginSetTime()
			}, 1000)
		}
	}
}
</script>

<style>
page {
	background-color: #F6F6F6;
}
</style>
<style scoped>
.writetel {
	width: 100%;
	box-sizing: border-box;
	padding-top: 14rpx;
}
.writetel-content {
	width: 720rpx;
	height: 460rpx;
	background-color: #fff;
	margin: 0 auto;
	border-radius: 12rpx;
	box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.05);
	box-sizing: border-box;
	padding-left: 38rpx;
	padding-right: 26rpx;
	padding-top: 32rpx;
	display: flex;
	flex-direction: column;
}
.writetel-content-tel {
	width: 100%;
	height: 72rpx;
	display: flex;
	align-items: center;
	margin-bottom: 24rpx;
}
.writetel-content-code {
	margin-bottom: 0;
}
.writetel-content-tel-txt {
	font-size: 30rpx;
	font-weight: 500;
	color: #333333;
	margin-right: 24rpx;
}
.writetel-content-tel-tel {
	padding: 0;
	margin: 0;
	outline: none;
	border: none;
	width: 372rpx;
	height: 100%;
	border-radius: 12rpx;
	border: 2rpx solid #DDDDDD;
	font-size: 30rpx;
	font-weight: 400;
	line-height: 72rpx;
	box-sizing: border-box;
	padding-left: 22rpx;
}
.writetel-content-tel-code {
	color: #1677FF;
	font-size: 28rpx;
	font-weight: 400;
	line-height: 40rpx;
	margin-right: 0;
	margin-left: auto;
}
.writetel-content-tel-code-active {
	color: #CCCCCC;
}
.writetel-content-tel-codecontent {
	width: 538rpx;
	height: 72rpx;
	display: flex;
	align-items: center;
	border: 2rpx solid #DDDDDD;
	border-radius: 12rpx;
}
.writetel-content-tel-codecontent-txt {
	padding: 0;
	margin: 0;
	outline: none;
	border: none;
	width: 372rpx;
	height: 100%;
	border-radius: 12rpx;
	font-size: 30rpx;
	font-weight: 400;
	line-height: 72rpx;
	box-sizing: border-box;
	padding-left: 22rpx;
}
.writetel-content-tel-codecontent-close {
	width: 30rpx;
	height: 30rpx;
	border-radius: 50%;
	background-color: red;
	margin-right: 26rpx;
	margin-left: auto;
}
.writetel-content-desc {
	width: 100%;
	height: 144rpx;
	background-color: red;
	margin-top: 42rpx;
	border-radius: 12rpx;
}
.writetel-content-desc-img {
	width: 100%;
	height: 100%;
}
.writetel-submitbtn {
	cursor: pointer;
	padding: 0;
	margin: 0;
	outline: none;
	border: none;
	background-color: #DDDDDD;
	margin-left: auto;
	margin-right: auto;
	margin-top: 36rpx;
	border-radius: 14rpx;
	width: 660rpx;
	height: 82rpx;
	line-height: 82rpx;
	text-align: center;
	font-size: 32rpx;
	font-weight: 500;
	color: #fff;
}
.writetel-submitbtn::after {
	border: none;
}
.writetel-submitbtn-active {
	background-color: #F02230;
}
</style>